<%@ page import="com.yoyo.itravel.constants.UserConstant" %>
<%@ page language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <%
        String contextPath = request.getContextPath();
        String basePath = request.getScheme() + "://"
                + request.getServerName() + ":" + request.getServerPort()
                + contextPath + "/";
    %>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" href="css/amazeui.min.css"/>
    <link rel="stylesheet" href="css/login.css"/>
    <link rel="stylesheet" href="css/mui.min.css"/>

    <title>登录爱旅游账号</title>
    <style>
        .bottomLine {
            border-bottom: 1px solid #ccc;
            border-top: 1px solid #ccc;
            padding-top: 8px;
            /*padding-bottom:10px;*/
        }

        a {
            text-decoration: none;
            color: black;;
        }

        a:hover {
            color: orange;
        }

        .bot {
            /*margin-top: 5px;*/
            margin-bottom: 49px;
            /*text-align: center;*/
            color: #7b6f5b;
        }

        input::-webkit-input-placeholder {
            color: lightgray;
            font-size: 14px;
        }
    </style>
</head>

<body>

<%
    String phone_email = "";
    String password = "";
    String login_info_str = "";
    String checkedRemember = "";
    String checkedAuto = "";
    Cookie[] cookies = request.getCookies();
    for (int i = 0; cookies != null && i < cookies.length; i++) {
        if ((UserConstant.REMEMBER_LOGIN_INFO).equals(cookies[i].getName())) {
            login_info_str = cookies[i].getValue();
            // 存在，获得用户登录信息
            phone_email = login_info_str.split("&")[0];
            password = login_info_str.split("&")[1];
            checkedRemember = login_info_str.split("&")[2];
        }
        if ((UserConstant.AUTO_LOGIN_INFO).equals(cookies[i].getName())) {
            login_info_str = cookies[i].getValue();
            // 存在，获得复选框的值
            checkedAuto = login_info_str.split("&")[2];
        }
    }
    request.setAttribute("checked_remember", checkedRemember);
    request.setAttribute("checked_auto", checkedAuto);
%>

<div style="background: rgba(161,222,255,0.3);">
    <div style="width: 1200px;margin: 0 auto;height: 75px;">
        <div class="logo">
            <img src="images/logo.png"/><span class="itravel">爱旅游</span>
        </div>
    </div>
</div>
<div class="am-g content" style="">
    <div style="width:1200px;margin:0 auto;position: relative;z-index: 999;">
        <div class="loginDiv " style="display: block;background: rgba(255,255,255,.85);">
            <form id="loginForm">
                <div class="am-u-sm-12" style="padding-left: 30px;padding-right: 30px;margin-top: 30px">
                    <h3 style="font-weight: bold;">欢迎登录</h3>
                    <span class="left1"></span>
                    <input type="text" name="phone_email" id="phone_email" placeholder="手机号/邮箱"
                           style="padding-left: 50px;margin-top: 48px;font-size: 16px;"
                           value='<%=phone_email%>'
                    />
                </div>

                <div class="am-u-sm-12" style="margin-top: 21px;padding-left: 30px;padding-right: 30px;">
                    <span class="left2"></span>
                    <input type="password" name="password" id="password" placeholder="请输入密码"
                           style="padding-left: 50px;font-size: 25px;"
                           value='<%=password%>'
                    />
                </div>
                <div class="am-u-sm-8" style="margin-top: 21px;padding-left: 30px;padding-right: 30px;">
                    <input type="text" id="input_code" placeholder="请输入验证码"
                           style="font-size: 16px;letter-spacing: 3px" />
                    <input style="position: absolute;top: 0px;margin-left: 10px;width: 110px;height: 40px;font-size: 21px;color: white;background: linear-gradient(to right, orangered, deepskyblue, cornflowerblue, orangered);
                        -webkit-background-clip: text;color: transparent;" type="button"
                           id="code" onclick="createCode()" title='点击更换验证码'/>
                </div>
                <div class="am-u-sm-12" style="margin-top: 12px;padding-left: 30px;padding-right: 30px;font-size: 12px;color: #757575;">
                    <input type="checkbox" name="autoLogin" ${checked_auto}
                           style="margin-top:1px;vertical-align:middle;"/>
                    <span style="margin-bottom:-1px;margin-left: 2px;font-size: 12px;vertical-align: middle;">两周内自动登录</span>
                    <input type="checkbox" name="rememberPwd" ${checked_remember}
                           style="margin-top:1px;vertical-align:middle;margin-left: 20px;"/>
                    <span style="margin-bottom:-1px;margin-left: 2px;font-size: 12px;vertical-align: middle;">两周内记住密码</span>
                </div>

                <div class="am-u-sm-12" style="margin-top: 45px;padding-left: 30px;padding-right: 30px;">
                    <button type="submit" class="am-btn am-btn-warning"
                            style="width: 100%;border-radius: 5px;font-size: 16px;">登录
                    </button>
                </div>
                <div class="am-u-sm-12" style="padding-left: 30px;padding-right: 30px;">
                    <p style="width: 100%;margin-top: 15px;font-size: 14px;">
                        <a href="forget_pwd.jsp" class="forget_pwd">忘记密码 </a>
                        <a class="register" href="pages/common/register.jsp">立即注册>></a>
                    </p>
                </div>
            </form>
        </div>
    </div>
</div>

<%-- 引入尾部界面 --%>
<jsp:include page="footer2.jsp"/>

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" src="js/login.js"></script>
<script type="text/javascript" src="js/amazeui.min.js"></script>
<script type="text/javascript" src="js/layer/layer.js"></script>

</body>

</html>